<template>
  <el-container class="main-content pd0">
    <el-main class="mt20">
      <ul class="blogs pl20 pr20">
        <blog-card-small
          v-for="item in blogs"
          v-bind:key="item.id"
          v-bind:blog="item"
        ></blog-card-small>
      </ul>
    </el-main>
    <el-aside class="main-slide">
      <Intro name="Node" v-bind:text="text"></Intro>
    </el-aside>
  </el-container>
</template>
<script>
import Intro from "views/components/intro.vue";
import { ref } from "vue";
import BlogCardSmall from "views/components/blog-card-small";
import request from "@/request/index";
import texts from "@/common/wonder-texts.js";
const ctext = texts[Math.floor(Math.random() * 13)];

export default {
  name: "PageNode",
  setup() {
    const text = ref();
    const blogs = ref([]);
    text.value =
      "靠山山倒，靠水水干，靠人人跑，掌握在自己手里的才是最靠谱的。" + ctext;

    request
      .get("/blog/list", { type: "node", state: "1", pageSize: 15 })
      .then((response) => {
        blogs.value = response.data;
      });
    return {
      text,
      blogs,
    };
  },
  components: {
    Intro,
    BlogCardSmall,
  },
};
</script>
<style lang="scss" scoped>
.main-content > .el-main {
  padding: 0;
}
.blogs {
  padding: 0;
}
.main-slide {
  width: 260px;
}
</style>
